<template>
    <div v-if="hackReset && data.length">
        <div class="upload-img-list" v-for="(item, index) in data" :key="index">
            <template v-if="item !=null && item !='' ">
                <img :src="item">
                <div class="upload-img-list-cover">
                    <Icon type="ios-eye-outline" @click.native="handleView(item)"></Icon>
                    <Icon type="ios-trash-outline" @click.native="handleRemove(index)"></Icon>
                </div>
            </template>
        </div>
        <Modal title="图片展示" v-model="visible">
            <img :src="imgName" v-if="visible" style="width: 100%">
        </Modal>
    </div>
</template>

<script>
export default {
    props: ['data'],
    data() {
        return {
            hackReset: true,
            imgName: '',
            visible: false,
        }
    },
    methods: {
        handleView (name) {
            this.imgName = name;
            this.visible = true;
        },
        handleRemove (index) {
            this.data.splice(index,1);
            //this.$emit('on-action-remove', item);
        },
    },
    watch: {
        data(val,old){
            // vue强制刷新组件
            this.hackReset = false
            this.$nextTick(() => {
                this.hackReset = true
            });
            /**
             * 把一个组件重置到初始状态是一个常见的需求，推荐的做法有两种，
             * 一种是父组件重置子组件的 prop，
             * 另一种是子组件暴露一个重置的方法供父组件调用。
             * 但有些时候，子组件既没有提供重置的方法，也没提供 prop 来重置自己的状态。
             * 更重要的是，这个子组件我们还动不了。
             * 于是我们就需要一种 hack 的方式来强制子组件重置到初始状态。使用这种方法
             */
        }
    }
}
</script>

<style scoped>
.upload-img-list{
    display: inline-block;
    width: 148px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    border: 1px solid transparent;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    position: relative;
    box-shadow: 0 1px 1px rgba(0,0,0,.2);
    margin-right: 4px;
}
.upload-img-list img{
    width: 100%;
    height: 100%;
}
.upload-img-list-cover{
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,.6);
}
.upload-img-list:hover .upload-img-list-cover{
    display: block;
}
.upload-img-list-cover i{
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    margin: 0 2px;
}

</style>